<template>
  <div class="">
    <el-form ref="ruleBasicInformationRef" :model="ruleForm" :rules="rules">
      <!-- 客户名称 -->
      <el-form-item
        prop="customerName"
        :label="$t('customerInfoMation_customerName')"
      >
        <div class="w350px">
          <customerNameSelect
            v-model="ruleForm.customerName"
            clearable
            @getLabels="getCustomerNameLabels"
          ></customerNameSelect>
        </div>
      </el-form-item>
      <!-- 店铺名称 -->
      <el-form-item prop="shopName" :label="$t('storeManagement_storeName')">
        <div class="w350px">
          <el-input
            :placeholder="$t('storeManagement_storeName_placeholder')"
            v-model="ruleForm.shopName"
            v-trim
          ></el-input>
        </div>
      </el-form-item>
      <!-- 经营类目 -->
      <el-form-item
        prop="businessCategory"
        :label="$t('storeManagement_businessCategory')"
      >
        <div class="w350px">
          <businessCategorySelect v-model="ruleForm.businessCategory"
          ></businessCategorySelect>
        </div>
      </el-form-item>

      <!-- 店铺类型 -->
      <el-form-item prop="shopType" :label="$t('storeManagement_shopType')">
        <div class="w500px">
          <shopTypeRadio
            v-model="ruleForm.shopType"
            @getLabels="getShopTypeLabel"
          ></shopTypeRadio>
        </div>
      </el-form-item>
      <!-- 公司名称 -->
      <el-form-item
        prop="companyName"
        :label="$t('storeManagement_companyName')"
      >
        <div class="w350px">
          <el-input
            :placeholder="$t('storeManagement_companyName_placeholder')"
            v-model="ruleForm.companyName"
            v-trim
          ></el-input>
        </div>
      </el-form-item>
      <!-- 纳税人识别号 -->
      <el-form-item
        prop="taxpayerId"
        :label="$t('storeManagement_taxpayerIdentificationNumber')"
      >
        <div class="w350px">
          <el-input
            :placeholder="
              $t('storeManagement_taxpayerIdentificationNumber_placeholder')
            "
            v-model="ruleForm.taxpayerId"
            v-trim
          ></el-input>
        </div>
      </el-form-item>
      <!-- 联系人、联系人电话 -->
       <el-row>
        <el-col :span="5">
          <el-form-item :label="$t('customerInfoMation_contacts')">
            <el-input v-trim :placeholder="$t('customerInfoMation_contacts_placeholder')" v-model="ruleForm.contactName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item prop="contactPhone" class="ml15" :label="$t('customerInfoMation_contacts_phoneNum')">
            <el-input v-trim :placeholder="$t('customerInfoMation_contacts_phoneNum_placeholder')" v-model="ruleForm.contactPhone"></el-input>
          </el-form-item>
        </el-col>
       </el-row>
       <!-- 营业时间 -->
       <el-form-item label="营业时间" prop="businessHours">
        <div class="w350px">
          <businessHours v-model="ruleForm.businessHours"></businessHours>
        </div>
       </el-form-item>
       <!-- 营业执照 -->
       

       <el-form-item label="营业执照">
        <div style="width:70%;">
          <businessLicense></businessLicense>
        </div>
       </el-form-item>
       
      <el-form-item>
        <div class="wfull flex justify_center">
          <!-- 确定 -->
          <el-button
            type="primary"
            @click="submitForm(ruleBasicInformationRef)"
            >{{ $t("btn_ok") }}</el-button
          >
          <!-- 取消 -->
          <el-button @click="resetForm(ruleBasicInformationRef)">{{
            $t("btn_cancel")
          }}</el-button>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>
<script lang="ts">
// 基础信息
import { defineComponent, reactive, ref,onMounted } from "vue";
import type { FormInstance, FormRules } from "element-plus";
import {
  BasicInformationFormDatatype,
  basicInformationFormRule,
} from "../../../viewModel/storeManagement/storeManagement";
import customerNameSelect from "./customerNameSelect.vue";
import businessCategorySelect from "./businessCategorySelect.vue";
import shopTypeRadio from "./shopTypeRadio.vue";
import businessHours from "./businessHours.vue";
import businessLicense from "./businessLicense.vue";
import { getSelectBaseInfo, createShop, upDateShop } from "../../../service/storeManagement/storeManagement"
import { useRouter } from "vue-router"
export default defineComponent({
  components: {
    customerNameSelect,
    businessCategorySelect,
    shopTypeRadio,
    businessHours,
    businessLicense,
  },
  setup() {
    
    onMounted(() => {
      console.log("基础信息onMounted",router);
      let { name } = router.currentRoute.value
      let { shopId } = router.currentRoute.value.params
      isStoreEdit.value = name === "storeEdit"
      if (isStoreEdit.value && shopId) {
        getSelectBaseInfo(Number(shopId)).then(res => {
          console.log("详情数据：",res);
          if (res && res.data && res.data.data) {
            let info = res.data.data
            let businessCategoryType = info.businessCategory && Object.prototype.toString.call(info.businessCategory) === '[object Array]'
            let businessHoursType = info.businessHours && Object.prototype.toString.call(info.businessHours) === '[object Array]'
            ruleForm.value = {
              ...info,
              businessCategory: businessCategoryType ? info.businessCategory : [],
              businessHours: businessHoursType ? info.businessHours : [],
            }
          }
        }).catch(() => {})
      }
    })
    let isStoreEdit = ref(false)
    const router = useRouter()
    const ruleForm = ref<BasicInformationFormDatatype>(
      new BasicInformationFormDatatype()
    );
    const rules = reactive<FormRules<BasicInformationFormDatatype>>(
      basicInformationFormRule
    );
    const ruleBasicInformationRef = ref<FormInstance>();

    const getCustomerNameLabels = (payload: string) => {
      console.log("获取客户名称标签：", payload);
    };
    const getCategoryLabels = (payload: string) => {
      console.log("获取经营类目标签：", payload);
    };
    const getShopTypeLabel = (payload: string) => {
      console.log("获取店铺类型：", payload);
    };

    const submitForm = async (formEl: FormInstance | undefined) => {
      if (!formEl) {
        return;
      }
      await formEl.validate((valid) => {
        if (valid) {
          console.log("submit", ruleForm.value);
          let submitData = ruleForm.value
          if (isStoreEdit.value) {
            upDateShop(submitData).then(res => {
              console.log("编辑成功：",res);
              
            }).catch(() => {})
          }else {
            createShop(submitData).then(res => {
              console.log("新增成功：",res);
              
            }).catch(() => {})
          }
          
        }
      });
    };
    const resetForm = (formEl: FormInstance | undefined) => {
      if (!formEl) return;
      formEl.resetFields();
    };
    return {
      ruleForm,
      rules,
      ruleBasicInformationRef,
      getCustomerNameLabels,
      getCategoryLabels,
      getShopTypeLabel,
      submitForm,
      resetForm,
    };
  },
});
</script>
<style scoped></style>
